<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>月营业额</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css">
    <script src="../../../plugins/echarts/echarts.min.js"></script>

</head>
<body>

<div id="app">

</div>

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1150px;height:500px;"></div>


<script src="../../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({

        el:'#app',
        data:{
            total: [],
            data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
        },

        mounted(){

        },
        created() {
             this.innt()
        },

        methods:{

            //同步请求
            async innt(){
                var res = await axios.get("/orders/getTotalByMonth")

                console.log("res++++")
                console.log(res.data.data)
                for (var i = 0; i < res.data.data.length; i++) {
                    Vue.set(this.total,res.data.data[i].month-1,res.data.data[i].total)
                }
                console.log(this.total)
                console.log()


                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '月度营业额'
                    },
                    tooltip: {},
                    legend: {
                        data: ['月度营业额']
                    },
                    xAxis: {
                        data:this.data
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '月度营业额',
                            type: 'bar',
                            data:this.total
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

        }
    })

</script>
</body>
</html>